<template>
	<div id="MyJoin">
		<x-header :left-options="{showBack: false}" title="我的参拍" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div>
			<div class="tabWrap">
				<tab :class="tabBarFixed == true ? 'isFixed' :''" :line-width="2" active-color='#a30000' custom-bar-width="36px">
					<tab-item class="vux-center" v-for="item in tablist" :selected="item.name === '拍卖中'" @on-item-click="tabChange(item.type)" :key="item.type">{{item.name}}</tab-item>
				</tab>
			</div>
			<div v-if="auctionList == ''">
				<div class="no-data">
					<img src="../../assets/images/home/nodata.png" />
				</div>
			</div>
			<!--拍品列表-->
			<div class="product-list" v-else>
				<div class="wrapperList">
					<div class="list">
						<div class="item" v-for="(item,index) in auctionList" :key="index" v-if="item.auction_goods">
							<router-link :to="'/Detail/id/' + item.auction_id">
								<div class="img">
									<img :src="'/los' + item.goods.goods_thumb" />
									<!--<span v-if="item.auction_goods.auction_endtime < cur_time">已结束</span>-->
									<span v-if="item.auction_goods.auction_endtime > cur_time">拍卖中</span>
									<div class="time">
										<count-down v-if="cache" :currentTime="cur_time" :startTime="item.auction_goods.auction_starttime" :endTime="item.auction_goods.auction_endtime" :tipText="'距开始'" :tipTextEnd="'距结束'" :endText="'已结束'" :dayTxt="':'" :hourTxt="':'" :minutesTxt="':'" :secondsTxt="''">
										</count-down>
									</div>
								</div>
								<div class="info">
									<p class="name">{{item.goods.goods_name}}</p>

									<p class="price">当前价格：<span>￥{{item.auction_goods.auction_bidprice}}</span>
									</p>
								</div>
							</router-link>
						</div>

					</div>
				</div>
			</div>
		</div>
		<!--喜欢-->
		<loading :show="show1" :text="text"></loading>
		<toast v-model="success" type="text" width='2.8rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery';
	import axios from 'axios';
	import CountDown from 'vue2-countdown';
	import BScroll from 'better-scroll';
	//瀑布流

	import {
		XHeader,
		Loading,
		Tab,
		TabItem,
		Sticky,
		ViewBox,
		Toast
	} from 'vux';

	export default { //变量
		data() {
			return {
				show1: false,
				text: '加载中',
				success: false,
				msg: '',
				cache: true,
				selected: '',
				tabBarFixed: false,
				auctionList: [],
				flag: true,
				tablist: [{
						name: '预展中',
						type: '1'
					},
					{
						name: '拍卖中',
						type: '2'
					},
					{
						name: '已结束',
						type: '3'
					}
				],
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Loading,
			Sticky,
			CountDown,
			ViewBox,
			Toast
		},
		beforeRouteLeave(to, from, next) {
			if(to.name == 'Detail') {
				from.meta.keepAlive = true; // 跳转到 详情页时，店铺页面缓存，即不刷新
			} else {
				from.meta.keepAlive = false;
			}
			next();
		},
		activated() {
			window.addEventListener('scroll', this.handleScroll);
		},
		mounted() {
			this.tabChange(2);
		},
		deactivated() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		//方法
		methods: {
			//tab切换时
			tabChange(index) {
				console.log(index);
				let _this = this;
				let more = true;
				let page = 1;
				this.selected = index;
				this.$http({
					method: 'GET',
					url: '/los/api/member/auction_signup_list.json?ts=' + this.selected,
					data: ''
				}).then((result) => {
					console.log(result);
					this.auctionList = result.data.data;
					this.cur_time = result.data.cur_time;
					this.cache = false;
					this.$nextTick(() => {
						this.cache = true
					})
				}).catch((err) => {
					console.log(err);
				})
				$(window).scroll(function() {
					var htmlHeight = $(document).height();
					var clientHeight = $(window).height();
					var scrollTop = $(document).scrollTop();
					var overHeight = scrollTop + clientHeight;
					if(overHeight >= htmlHeight * 0.9) {
						if(more == true) {
							more = false;
							page += 1;
							if(_this.selected == index) {
								axios.get('/los/api/member/auction_signup_list.json?ts=' + _this.selected + '&page=' + page).then(function(result) {
									$.each(result.data.data, function(index, val) {
										_this.auctionList.push(val);
									});
									more = true;
									if(result.data.data == '') {
										more = false;
									}
								}).catch(function(error) {

								});
							}
						}
					}
				})
			},
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				var offsetTop = document.querySelector('.tabWrap').offsetTop;
				if(scrollTop > offsetTop) {
					this.tabBarFixed = true;
				} else {
					this.tabBarFixed = false;
				}
			},

			back() {
				window.history.go(-1);
			}
		},
	}
</script>

<style scoped>
	.header {
		background-color: #fff !important;
	}

	.isFixed {
		position: fixed;
		z-index: 999;
		width: 100%;
		top: 0;
	}

	.nodata {
		width: 100%;
		height: 100%;
		margin: 0 45%;
	}

	.wrapperList {
		/*height: 700px;*/
		overflow: hidden;
	}

	.wrapperList .list {
		overflow: hidden;
	}

	.no-data {
		width: 2.96rem;
		height: 2.96rem;
		margin: 3rem auto 0;
	}

	.no-data img {
		width: 100%;
	}
	/*列表项*/

	.product-list {
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #fff;
	}

	.product-list .list {
		width: 100%;
		padding: 0.26666rem;
		padding-left: 0.13333rem;
		background-color: #fff;
	}

	.product-list .list .item {
		position: relative;
		float: left;
		width: 50%;
		padding-left: 0.13333rem;
		margin-bottom: 0.26666rem;
	}

	.product-list .list .item .img {
		position: relative;
		font-size: 0;
	}

	.product-list .list .item .img img {
		width: 100%;
		height: 3.92rem;
	}

	.product-list .list .item .img span {
		background: #da4240;
		color: #fff;
		width: 1.41rem;
		height: 0.53rem;
		font-size: 0.32rem;
		left: 0.26rem;
		display: inline-block;
		line-height: 0.53rem;
		text-align: center;
		position: absolute;
		/*z-index: 999;*/
		border-bottom-left-radius: 0.1rem;
		border-bottom-right-radius: 0.1rem;
	}

	.product-list .list .item .img .time {
		width: 100%;
		height: 0.66666rem;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 0.26666rem;
		font-size: 0.26666rem;
		color: #fff;
		line-height: 0.72rem;
		background: linear-gradient(rgb(0,0,0,0),rgb(0,0,0,0.5));
	}

	.product-list .list .item .info {
		padding: 0.32rem 0.21333rem 0.34666rem;
		border-left: solid 1px #e6e6e6;
		border-right: solid 1px #e6e6e6;
		border-bottom: solid 1px #e6e6e6;
		height: 1.7rem;
	}

	.product-list .list .item .info .name {
		font-size: 0.34666rem;
		padding-bottom: 0.1rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.product-list .list .item .info .price {
		color: #aaa;
		font-size: 0.29333rem;
	}

	.product-list .list .item .info .price span {
		color: #EB443C;
		font-size: 0.34666rem;
	}

	.product-list .list .item .info .price .stxt {
		width: 0.8rem;
		height: 0.34666rem;
		margin-left: 0.26666rem;
		line-height: 0.4rem;
		font-size: 0.26666rem;
		text-align: center;
		border-radius: 0.05333rem;
		display: inline-block;
	}

	.product-list .list .item .info .price .stxt.lead {
		background-color: #ffe0e0;
		color: #DA4240;
	}

	.product-list .list .item .icon-auction {
		position: absolute;
		top: 0;
		left: 0.3rem;
		padding: 0.05rem 0.1rem;
		color: #fff;
		font-size: 0.32rem;
		background-color: #db4342;
		border-bottom-left-radius: 0.05333rem;
		border-bottom-right-radius: 0.05333rem;
	}
</style>
<style>
	.product-list .item .count-down .endtxt,
	.product-list .item .count-down .starttxt,
	.product-list .item .count-down .tiptxt,
	.product-list .item .count-down .day,
	.product-list .item .count-down .hour,
	.product-list .item .count-down .minute,
	.product-list .item .count-down .seconds,
	.product-list .item .count-down i {
		font-size: 0.29333rem;
		display: inline-block;
	}

	#MyJoin #vux_view_box_body {
		padding-bottom: 0;
	}
</style>
